<script setup lang="ts" name="GoodsSku">
import { GoodsInfo, Spec, SpecValue } from '@/types/goods'
import bwPowerSet from '@/utils/power-set'
const props = defineProps<{
  goods: GoodsInfo
  skuId?: String
}>()
const emit = defineEmits<{
  (e: 'changeSku', skuId: string): void
}>()
// 激活的规格
const changeSelected = (item: Spec, sub: SpecValue) => {
  // 禁用则不操作
  if (sub.disabled) return
  if (sub.selected) {
    sub.selected = false
  } else {
    item.values.forEach((i) => (i.selected = false))
    sub.selected = true
  }

  getSelectedSpec()
  updateDisabledStatus()
  // 找到选中的值
  const selected = getSelectedSpec().filter((i) => i)
  // console.log(selected)
  // 判断是否全部选中
  if (selected.length === props.goods.specs.length) {
    // 全部选中去找pathMap中的id
    // 处理格式
    const key = selected.join('★')
    // console.log(key)
    // pathMap[key]在路径字典中已经存在 直接使用，注意拼接五角星
    const [skuId] = pathMap[key]
    // console.log(skuId)
    emit('changeSku', skuId)
  }
}
// 注意，设置默认选中必须在默认禁用之前设置
// 初始化时的默认选中规格
const initSelectedSpec = () => {
  // 根据父组件传的skuid 找到当前商品
  const skus = props.goods.skus.find((item) => item.id === props.skuId)
  // console.log(skus)
  // 找到后把规格选中
  if (skus) {
    props.goods.specs.forEach((sub, index) => {
      // console.log(sub)
      // 当前商品选中的sku
      const res = skus.specs[index].valueName
      // const value = sub[index].valueName
      // 根据sku值 让对应的sku显示
      const value = sub.values.find((son) => son.name === res)
      // console.log(value)
      if (value) {
        value.selected = true
      }
    })
  }
}
// initSelectedSpec()
// 获取选中的值
const getSelectedSpec = () => {
  const arr: string[] = []
  props.goods.specs.forEach((item) => {
    const temp = item.values.find((sub) => sub.selected)
    arr.push(temp ? temp.name : '')
  })
  // console.log(arr)

  return arr
}
// getSelectedSpec()
/**
 * 获取路径字典
 */
const getPathMap = () => {
  const pathMap: { [key: string]: string[] } = {}
  // 过滤掉库存为0的sku
  const skus = props.goods.skus.filter((item) => item.inventory > 0)

  // console.log(skus)
  // 获取所有规格的单行规格情况
  skus.forEach((data) => {
    const arr = data.specs.map((sub) => sub.valueName)
    // console.log(data)
    // console.log(data.id)

    // console.log(arr)
    // 获取所有规格的组合情况
    const powerSet = bwPowerSet(arr)
    // console.log(powerSet)
    powerSet.forEach((i) => {
      const key = i.join('★')
      // console.log(key)

      // data.id 是单一组合数组中的id
      if (key in pathMap) {
        // id存在push其他情况的规格
        pathMap[key].push(data.id)
        // console.log(pathMap[key])
      } else {
        // 把规格的id赋值给pathMap,
        // 给pathMap添加一个键值对
        // 蓝色★10cm: ['1369155864430120962']
        pathMap[key] = [data.id]
        // console.log(pathMap[key])
      }
    })
  })
  // console.log(pathMap)
  return pathMap
}
const pathMap = getPathMap()

// 更新按钮的禁用状态
const updateDisabledStatus = () => {
  // console.log('我执行吗')
  // const res = getSelectedSpec()
  // console.log(res)
  props.goods.specs.forEach((item, index) => {
    // 判断规格中某个值是否要被禁用
    const selectedSpec = getSelectedSpec()
    item.values.forEach((sub) => {
      // 把当前需要判断的规格放到 选中的数组中
      selectedSpec[index] = sub.name
      const key = selectedSpec.filter((v) => v).join('★')
      // console.log(key)
      if (key in pathMap) {
        sub.disabled = false
      } else {
        sub.disabled = true
      }
      // console.log(selectedSpec)
      // if (sub.name in pathMap) {
      //   // 当前规格的名字在pathMap存在，不禁用
      //   sub.disabled = false
      // } else {
      //   // 当前规格在pathMap找不到，禁用
      //   sub.disabled = true
      // }
    })
  })
}
//  这两个的顺序是先默认选中，然后更新状态  不然 会出现页面初始时禁用状态失效
initSelectedSpec()
updateDisabledStatus()
</script>
<template>
  <div class="goods-sku">
    <dl v-for="item in goods.specs" :key="item.name">
      <dt>{{ item.name }}</dt>
      <dd>
        <template v-for="sub in item.values" :key="sub.name">
          <img
            v-if="sub.picture"
            :src="sub.picture"
            alt=""
            :title="sub.name"
            :class="{ selected: sub.selected, disabled: sub.disabled }"
            @click="changeSelected(item, sub)"
          />
          <span
            v-else
            :class="{ selected: sub.selected, disabled: sub.disabled }"
            @click="changeSelected(item, sub)"
            >{{ sub.name }}
          </span>
        </template>
      </dd>
    </dl>
  </div>
</template>

<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    // border-color: @xtxColor;
    border-color: red;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-top: 5px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
